<template>
  <div>
    <div class="returnBtn">
      <t-button icon="arrow-left" @click="cancel">返回</t-button>
    </div>
    <div class="content">
      <t-form ref="menu" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <div class="row">
          <div class="col-6 p-r-15">
            <t-form-item label="菜单ID">
              <t-input v-model="formValidate.id" disabled></t-input>
            </t-form-item>
          </div>
          <div class="col-6 p-l-15">
            <t-form-item label="菜单状态">
              <t-input v-model="formValidate.state" disabled></t-input>
            </t-form-item>
          </div>
        </div>
        <div class="row">
          <div class="col-6 p-r-15">
            <t-form-item label="菜单名称" prop="name">
              <t-input v-model="formValidate.name"></t-input>
            </t-form-item>
          </div>
          <div class="col-6 p-l-15">
            <t-form-item label="菜单排序" prop="sort">
              <t-input v-model="formValidate.sort"></t-input>
            </t-form-item>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <t-form-item label="菜单地址" prop="address">
              <t-input v-model="formValidate.address"></t-input>
            </t-form-item>
          </div>
        </div>
        <div class="row">
          <div class="col-6 p-r-15">
            <t-form-item label="菜单图标">
              <t-input v-model="formValidate.icon"></t-input>
            </t-form-item>
          </div>
          <div class="col-6 p-r-15">
            <t-form-item label="模块编号">
              <t-input v-model="formValidate.moduleCode" disabled></t-input>
            </t-form-item>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <t-form-item label="备注">
              <t-input v-model="formValidate.remarks" :rows="10" spellcheck = "false" type="textarea" placeholder="请输入"></t-input>
            </t-form-item>
          </div>
        </div>
      </t-form>
      <div class="btns">
        <div>
          <t-button @click="cancel">取消</t-button><t-button type="primary" style="margin-left:14px" @click="preservation">保存</t-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    const VALIDATEPASS = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('排序不能为空'))
      } else {
        if (!/^[0-9]*[1-9][0-9]*$/.test(value)) {
          callback(new Error('请输入正整数'))
        }
        callback()
      }
    }
    return {
      title: '编辑菜单',
      formValidate: {
        name: '',
        address: '',
        remarks: '',
        icon: '',
        sort: '',
        moduleCode: '',
        id: '',
        state: ''
      },
      ruleValidate: {
        sort: [
          {
            validator: VALIDATEPASS,
            trigger: 'blur'
          }
        ],
        name: [
          {required: true, message: '菜单名称不能为空', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '菜单地址不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  watch: {
  },
  created() {

  },
  activated() {
    let id = this.$route.params.id
    let datas = {}
    datas.bo = 'user'
    datas.bc = 'USER_FUNCTION'
    datas.condition = {'ID': id}
    this.http.$http.post(this.services.QUERY_MENU_LIST, datas).then(res => {
      let data = res.data
      if (data.CODE === 0) {
        this.formValidate.sort = data.RESULT.DATALIST[0].FUN_SEQ
        this.formValidate.name = data.RESULT.DATALIST[0].NAME
        this.formValidate.address = data.RESULT.DATALIST[0].VIEWNAME
        this.formValidate.remarks = data.RESULT.DATALIST[0].REMARK
        this.formValidate.icon = data.RESULT.DATALIST[0].FUNC_IMG
        this.formValidate.id = data.RESULT.DATALIST[0].ID
        this.formValidate.moduleCode = data.RESULT.DATALIST[0].MODULE_CODE
        this.formValidate.state = data.RESULT.DATALIST[0].STATE
      } else {
        this.$Message.danger('查询菜单信息失败!')
      }
    })
  },
  methods: {
    // 表单重置
    onReset() {
      this.$refs['menu'].resetFields()
    },
    // 保存
    preservation () {
      this.$refs['menu'].validate(valid => {
        if (valid) {
          let list = {}
          let datas = {}
          list.bo = 'user'
          list.bc = 'USER_FUNCTION'
          list.validation_method = 'com.wframe.usermanager.services.valid.FuncMuneCreateValidator'
          datas.FUNC_TYPE = 'H'
          datas.MODULE_CODE = this.formValidate.moduleCode
          datas.NAME = this.formValidate.name
          datas.VIEWNAME = this.formValidate.address
          datas.FUN_SEQ = this.formValidate.sort
          datas.FUNC_IMG = this.formValidate.icon
          datas.REMARK = this.formValidate.remarks
          list.ins_value = JSON.stringify(datas)

          this.http.$http.post(this.services.USERMNG_CREATE, list).then(res => {
            let data = res.data
            if (data.CODE === 0) {
              this.$Message.success('编辑菜单成功!')
              this.$router.push('/auth')
            } else {
              this.$Message.danger('编辑菜单失败!')
            }
          })
        }
      })
    },
    reset () {
      this.formValidate.name = ''
      this.formValidate.address = ''
      this.formValidate.remarks = ''
      this.formValidate.icon = ''
      this.formValidate.sort = ''
    },
    cancel () {
      this.$router.push('/auth')
    }
  }
}
</script>
<style scoped lang="less">
.returnBtn{
  margin-top: 30px 0;
}
.content{
  max-width: 590px;
  margin: 0 auto 128px;
  .col-6,
  .col-12{
    padding: 0;
  }
  .p-r-15{
    padding-right: 15px;
  }
  .p-l-15{
    padding-left: 15px;
  }
  .btns{
    // display: inline-block;
    max-width: 170px;
    margin: 0 auto;
  }
}
.type{
  position: relative;
  span {
    position: absolute;
    left: 82px;
    top: -27px;
    padding-left: 5px;
    color: red;
  }
  .feedback{
    .icon{
      display: inline-block;
      width: 12px;
      height: 12px;
      color: red;
      font-size: 12px;
      margin-right: .3em;
    }
  }
}
</style>
